<template>
  <div>
    <div class="box">
      <div class="boxl">
        <h3>查看房屋估值走势</h3>
        <p>随时掌握小区均价与邻里动态</p>
      </div>
      <img src="@/assets/logo.png" alt />
      <van-button type="info" class="btn" @click="fn()">立即查看</van-button>
    </div>
    <h4>交易工具</h4>
    <div class="hbox">
      <div class="box-l" v-for="(v,i) in gongju" :key="i">
        <span :class="v.tb"></span>
        <em>{{v.name}}</em>
      </div>
       <!-- <div class="box-l">
        <span class="iconfont icon-chujia"></span>
        <em>房贷计算</em>
      </div>
       <div class="box-l">
        <span class="iconfont icon-chujia"></span>
        <em>房贷计算</em>
      </div> -->
    </div>
    <h5>生活服务</h5>
    <div class="life">
        <h1>搬家服务</h1>
        <p>全程搬运 安心选择</p>
        <span>点击查看 ></span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gongju:[
        {name:"房贷计划",tb:"iconfont icon-chujia"},
        {name:"婚姻权限",tb:"iconfont icon-shezhi1"},
        {name:"换房计算器",tb:"iconfont icon-erji"},
      ]
    }
  },
  methods: {
    fn(){
      this.$router.push("/myhome")
    }
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 170px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.boxl {
  height: 80px;
}
.box img {
  width: 93px;
  height: 80px;
}
.van-button {
  width: 100%;
  height: 50px;
  /* z-index: 1; */
  background: #fff;
  color: #5f92f7;
  margin-bottom: 15px;
}
h4 , h5{
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 20px;
}
h5{
    margin-top: 20px;
}
.hbox{
    width: 100%;
    display: flex;
    justify-content: space-between;
    
}
.box-l{
    width: 32%;
    height: 45px;
    line-height: 45px;
    display: flex;
    justify-content: space-evenly;
    padding: 0 10px;
    background: #f2f2f2;
    border-radius: 5px;
}
.box-l em{
    font-size: 10px;
}
.life{
    width: 100%;
    height: 137px;
    background: linear-gradient(to bottom ,#3072f6,#fff);
    padding: 27px 0 27px 22px;
}
.life p{
    margin: 15px 0;
}
h1{
    font-size: 18px;
    font-weight: 500;
}
</style>